/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    AlertIOS
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import Second from "./Component/List/second";
import Login from './Component/List/login';

export default class HDTabBar extends Component {
    static propTypes={
        goToPage:React.PropTypes.func,//跳转到tab的方法
        activeTab:React.PropTypes.number,//选中的下标
        tabs:React.PropTypes.array,//tabs的集合，像OC items的数组

        //接下来，我们扩展自定义的属性
        tabNames:React.PropTypes.array,//保存图片的名称
        tabIconNames:React.PropTypes.array,//item图片的名称
        //tabIconSelectNames:React.PropTypes.array,//保存选中的图片
    }
    render() {
        return (
            <View style={styles.tabStyle}>

                {
                    this.props.tabs.map((tab,i)=>this.renderItem(tab,i))
                }

            </View>
        );
    }
    renderItem(tab,i){
        const color = this.props.activeTab==i?"orange":"black";

        return(
            <TouchableOpacity
                style={styles.tab}
                onPress={
                    ()=>{
                            this.props.goToPage(i)
                        }
                    }
                key={i}
            >
                <View style={styles.tabBarItems}>
                    <Icon name={this.props.tabIconNames[i]}
                          size={30}
                          color={color}

                    />
                    <Text style={{color:color}}>{this.props.tabNames[i]}</Text>
                </View>

            </TouchableOpacity>

        )
    }

}

const styles = StyleSheet.create({
    tabStyle:{
        flexDirection:'row',
        height:50,
        backgroundColor:'#dddddd'
    },
    tabBarItems:{

        alignItems:'center',
    },
    tab:{
        flex:1,
    }

});